<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css"  media="all">
	</head>
	<body>
		<div class="layui-btn-group demoTable">
		  <button class="layui-btn" data-type="expandAll">全部展开</button>
		  <button class="layui-btn" data-type="collapseAll">全部折叠</button>
		</div>
		<table class="layui-hide" id="test"></table>
		
		<script src="layui/layui.js" charset="utf-8"></script>
		
		<script type="text/javascript">
			layui.use('grid', function(){
				var grid = layui.grid;
				
				var treeTable = grid.render({
					elem: '#test'
					,url:'data.json'
					,height: "full-58"
					,treeSwitch:true
					,tree:{
						treeOrder:"sort"
						,initialState: 'expanded'
						,saveState: true
						,treeColumn:1
						,onChange: function(data) {
	                        console.log(data);
	                    }
	                    ,onCollapse: function(data) {
	                        console.log(data);
	                    }
	                    ,onExpand: function(data) {
	                    	console.log(data);
	                    }
					}
					,cols: [[
						{type: 'checkbox'}
						,{field: 'name', title: '名称'}
						,{field: 'url', title: '地址', edit:"text",width:200}
						,{field: 'sort', title: '排序', edit:"text", width:70}
						,{field: 'type', title: '类型', width:70}
						,{field: 'status', title: '状态', width:100}
					]]
				});
				var $ = layui.$, active = {
					expandAll:function(){
						treeTable.tree.expandAll();
					},
					collapseAll:function(){
						treeTable.tree.collapseAll();
					}
				};
				$('.demoTable .layui-btn').on('click', function(){
				    var type = $(this).data('type');
				    active[type] ? active[type].call(this) : '';
				});
				
			});
			
		</script>
	</body>
</html>
